/*

-------------------------------------------------------------------------------------------------

Theme Name:   vCard-esam

Theme URI:    http://www.esam.fi5.us

Description:  vCard template.

Version:      Version 1.2

Style:        Light / right navigation

Author:       Mark Dijkstra

Author URI:   http://www.markdijkstra.eu

Translite:	  esam

Translite URI: http://www.esam.fi5.us

Updated:      --/--/----

Copyright:    (c) 2011 essam chtatou

-------------------------------------------------------------------------------------------------



All rights reserved.



*/



@import url("tipsy.css");/* tooltip */

@import url("prettyPhoto.css");/* lightbox */



/* reset */

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,

pre, form, fieldset, table, th, td { margin: 0; padding: 0; }



html{

	font-family:Tahoma, Helvetica, sans-serif;

	font-size:11px;

	color:#6b6b6b;

	line-height:20px;

	background:#e7e7e7;

}

body{direction: rtl;

}

input, 

textarea{

	outline:none;/* preventing the chrome and safari nasty yellow border */

	border:1px solid #ccc;

	background:#FFF;

}

a:focus{

	outline:none;

}

a, 

a:visited, 

a:active{

	color:#6b6b6b;

	text-decoration:none;

}

a:hover{

	text-decoration:underline;

}

/* this will be added by javascript

.corners{

	 -moz-border-radius: 5px;

     -webkit-border-radius: 5px;

}

.corners-r{

	 -moz-border-radius-topright: 5px;

	 -moz-border-radius-bottomright: 5px;

     -webkit-border-top-right-radius: 5px;

	 -webkit-border-bottom-right-radius: 5px;

}

*/

/*

------------------------------------------------------------------------

WRAPPER - Content wrap CSS style.

------------------------------------------------------------------------

*/



div#wrapper{

	width:620px;

	margin:140px auto;

	position:relative;

}



/*

------------------------------------------------------------------------

Card - Card content wrap CSS style.

------------------------------------------------------------------------

*/



div#card{

	width:560px;

	height:255px;

	float:left;

	background:#fff;

	border-left:1px solid #cccccc;

	border-right:1px solid #cccccc;

	position:relative;

	margin-left:29px;

	overflow:hidden;

	z-index:2;

}

div#card-in{

	width:508px;

	height:242px;

	background:#f8f8f8;

	border:1px solid #e8e8e8;

	margin:5px 10px 0px 10px;

	padding-right:30px;

}

ul#menu{

	width:20px;

	list-style-type:none;

	border-top:1px solid #e8e8e8;

	border-left:1px solid #e8e8e8;

	border-bottom:1px solid #e8e8e8;

	position:absolute;

	right:10px;

	top:52px;

	background:#fff;

	padding:10px 1px 0 8px;

}

ul#menu li{

	list-style-type:none;

	width:18px;

	height:18px;

	padding-bottom:5px;

	margin-bottom:4px;

}

ul#menu li.hr{

	list-style-type:none;

	border-bottom:1px solid #e8e8e8;

}

ul#menu li a img{

	width:19px;

	height:19px;

	border:none;

	background:#fff!important;/* IE fade to bug */

}

ul#menu li a{

	float:left;

	width:19px;

	height:19px;

}

div#content{

	width:508px;

	height:242px;

	float:left;	

}

div.tip-logo{

	width:196px;

	height:54px;

	float:left;

	margin:84px 0 0 142px;

	overflow:hidden;

	position:relative;

}

div.tip-logo a,

div.tip-logo a:visited,

div.tip-logo a:active{

	width:196px;

	height:54px;

	float:left;

}

div.tip-logo img#logo-bg{

	position:absolute;

	top:-300px;

	left:0px;

	border:none;

}

div.tip-logo img#logo-frame{

	position:absolute;

	top:0px;

	left:0px;

	border:none;

	z-index:1;

	overflow:hidden;

}



/* boxes/pages */



div.box{

	width:478px;

	height:222px;

	float:left;

	margin:10px 15px 10px 15px;

	position:relative;

	background:#f8f8f8;

}

div.box h2{

	width:100%;

	float:left;

	font-size:11px;

	font-weight:bold;

	color:#00AECE;

	margin-bottom:13px;

}

div.box p img.avatar{

	width:60px;

	height:60px;

	margin:3px 10px 5px 0;

	float:left;

	padding:3px;

	border:1px solid #eee;

	background:#FFF;

}

div.box p{

	width:100%;

	float:left;

	text-align:justify;

}



/* work */



div.box .project{

	width:68px;

	height:68px;

	margin:3px 14px 10px 0;

	float:left;

	border:none;

	background:#f8f8f8;

}

div.box .project-last{

	width:68px;

	height:68px;

	margin:4px 0px 10px 0px;

	float:left;

	border:none;

	background:#f8f8f8;

}

div#slider-in{

	overflow:hidden;

}

div#slider-in,

div#slider-in div{

	width:478px;

	height:154px;

	float:left;

}

div#work-nav{

	width:50px;

	height:23px;

	float:left;

	background:url(../images/nav-bg.png) no-repeat;

	margin:12px 0 0 211px;

	padding:2px 3px 0 3px;

}

div#work-nav a#prev{

	width:20px;

	height:20px;

	float:left;

	background:url(../images/prev-btn.png) no-repeat;

}

div#work-nav a#prev:hover{

	background:url(../images/prev-btn-hover.png) no-repeat;

}

div#work-nav a#next{

	width:20px;

	height:20px;

	float:right;

	background:url(../images/next-btn.png) no-repeat;

}

div#work-nav a#next:hover{

	background:url(../images/next-btn-hover.png) no-repeat;

}



/* Social */



a.social-box-left{

	width:226px;

	height:38px;

	float:left;

	margin:3px 20px 5px 0;

	color:#666;

	border:1px solid #e5e5e5;

	background:#fff;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

}

a.social-box-right{

	width:226px;

	height:38px;

	float:left;

	margin:3px 0 5px 0;

	color:#666;

	border:1px solid #e5e5e5;

	background:#fff;

	-moz-border-radius: 5px;

    -webkit-border-radius: 5px;

}

a.social-box-left img,

a.social-box-right img{

	width:32px;

	height:32px;

	float:left;

	margin:4px 10px 0px 4px;

	border:none;

}

a.social-box-left strong,

a.social-box-right strong{

	width:170px;

	height:17px;

	float:left;

	margin:0 0 0px 0;

	color:#333;

	font-size:11px;

	font-weight:bold;

}

a.social-box-left:hover,

a.social-box-right:hover{

	text-decoration:none;

	background:#eee;

	border:1px solid #e5e5e5;

	cursor:pointer;

}



/* Contact */



div#left{

	width:238px;

	height:183px;

	float:left;

}

div#right{

	width:219px;

	height:180px;

	float:left;

	padding-left:20px;

	margin-top:3px;

	border-left:1px dotted #ccc;

}

div#right input{

	width:214px;

	height:20px;

	float:left;

	-moz-border-radius: 5px;

    -webkit-border-radius: 5px;

	padding:2px 0 0 4px;

	margin-bottom:5px;

}

div#right textarea{

	width:214px;

	height:92px;

	float:left;

	-moz-border-radius: 5px;

    -webkit-border-radius: 5px;

	padding:2px 0 0 4px;

	margin-bottom:5px;

	font-family:Tahoma, Helvetica, sans-serif;

	font-size:11px;

}

div#right input#submit{

	width:60px;

	height:24px;

	float:right;

	-moz-border-radius: 5px;

    -webkit-border-radius: 5px;

	padding:0px 0 2px 0px;

	cursor:pointer;

	color:#666;

}

div#right input#submit:hover{

	color:#333;

	border:1px solid #999;

}



/* copyright */



div#copyright{

	width:200px;

	height:21px;

	background:#FFF;

	border:1px solid #ccc;

	position:absolute;

	right:30px;

	top:220px;

	padding:2px 0px 0 0;

	font-size:9px;

}

div#copyright p{

	width:170px;

	float:left;

	margin-left:10px;

}

div#copyright img{

	width:10px;

	height:10px;

	margin:5px 3px 0 5px;

	float:right;

	cursor:pointer;

}



/* background, top and bottom card */



div#top{

	width:562px;

	height:6px;

	background:url(../images/card-top.jpg) no-repeat;

	margin:0 0 0 29px;

	float:left;

}

div#bottom{

	width:620px;

	height:90px;

	background:url(../images/card-bottom.jpg) no-repeat;

	float:left;

}



/*

------------------------------------------------------------------------

LIVE VALIDATION - Live Validation CSS style.

------------------------------------------------------------------------

*/



.LV_validation_message{

    font-weight:bold;

	float:right;

	padding-right:130px;

}

.LV_valid {

    color:#00CC00;

}

span.LV_invalid {

   display:none;

} 

.LV_valid_field,

input.LV_valid_field:hover, 

input.LV_valid_field:active,

textarea.LV_valid_field:hover, 

textarea.LV_valid_field:active {

}  

.LV_invalid_field, 

input.LV_invalid_field:hover, 

input.LV_invalid_field:active,

textarea.LV_invalid_field:hover, 

textarea.LV_invalid_field:active,

select.LV_invalid_field:active,

select.LV_invalid_field:hover  {

     border:1px solid #ff8b8b;

}